<script setup lang="ts">
/**
 * 计算属性computed
 *
 */
import {computed, reactive} from 'vue';

const person = reactive({
  firstname: '张',
  lastname: '三'
})

// 计算属性简写形式(没有考虑计算属性被修改)，要的是回调函数的返回值
person.fullname = computed(() => {
  return person.firstname + '-' + person.lastname;
})


// 计算属性完整写法(考虑值被修改)
person.fullname = computed({
  get() {
    // 读取值
    return person.firstname + '-' + person.lastname;
  },
  set(newVal) {
    // 修改值
    const arr = newVal.split('-');
    person.firstname = arr[0];
    person.lastname = arr[1];
  }
})

</script>




<template>
  <h1>一个人的信息</h1>
  姓：{{ person.firstname }} <br>
  名：{{ person.lastname }} <br>
  <span>全名：{{ person.fullname }}</span> <br>
  全名：<input type="text" v-model="person.fullname">
</template>

<style scoped>

</style>